import styles from './menu.module.scss'
import { Menu } from 'antd'
import type { MenuProps} from 'antd'
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
} from '@ant-design/icons';
import { Outlet } from 'react-router-dom'

type MenuItem = Required<MenuProps>['items'][number];

const getItem = (
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem  => {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}

const menu = () => {

  const items:MenuItem[] = [
    getItem('Baidu Map', '1', <PieChartOutlined />),
    getItem("Echarts", "2", <DesktopOutlined />),
    getItem("ThreeJs", "3", <ContainerOutlined />),
    getItem("Antd Form", "4", <AppstoreOutlined />)
  ]

  return (
    <div>
      <div className={styles.menu}>
        <Menu
          defaultSelectedKeys={["1"]}
          defaultOpenKeys={[]}
          mode="inline"
          items={items}
        />
      </div>
      <Outlet/>
    </div>
  )
}

export default menu